﻿.pd100 { padding: 100px 0 }
.pd60 { padding: 60px 0 }
.pd40 { padding: 40px 0 }
.pd10 { padding: 10px 0 }
.pd30 { padding: 0 30px }
.red { color: #F43D3D }
.m10 { margin: 10px 0 }
.m8 { margin: 8px 0 }
.w390 { 
    margin: 0 auto;
    width: 390px 
}
.w1200 {
    margin: 0 auto;
    width: 1200px 
}
.clearfix {
    *zoom: 1;
}
.clearfix:after {
    content: '';
    display: table;
    height: 0;
    clear: both;
    visibility: hidden
}
.loading {
    padding: 50px 0;
    color: #777;
    font-size: 16px;
    text-align: center;
}
.overlay {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.8)
}
.modal {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1000
}
.modal-main {
    padding: 20px 20px 40px;
    width: 400px;
    background: #fff;
    text-align: center;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.modal-pane {
    margin: 0 auto;
    height: 250px;
    width: 300px;
}
.modal-title { margin-top: 28px }
.modal-content { 
    margin-top: 10px;
} 
.show-qrcode .overlay,
.show-qrcode .modal {
    display: block;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #c9c9c9
}
.box-multiple,
.box-single {
    border-bottom: 1px solid #ddd
}
/*.show-header .header {
    display: block;
    -webkit-animation: slideDown .3s ease;
    -moz-animation: slideDown .3s ease;
    animation: slideDown .3s ease;
}
body.show-header  {
    padding-top: 64px;
}
.header { display: none }
body { padding-top: 0 }*/
/* multiple page */
.m-progess {
    padding: 35px 0 40px;
    overflow: hidden;
    background: #F9FAFB;
}
.m-progess-wrapper {
    float: left;
    margin-left: 50%;
    _zoom: 1;
}
.m-progess-inner {
    margin-left: -50%;
}
.m-progess-item {
    margin-right: 85px;
    position: relative;
    float: left;
    _zoom: 1;
}

.m-progess-item-last { margin-right: 0 }
.m-progess-item .text {
    margin-bottom: 12px;
    color: #aaa;
    font-size: 20px;
}
.m-progess-active .text {
    color: #DDA960;
} 
.m-progess-item .dot {
    position: relative;
    margin: 0 auto;
    height: 22px;
    width: 22px;
    background: url(../images/dot.png);
    background-size: contain;
}
.m-progess-active .dot {
    background: url(../images/dot-active.png);
    background-size: contain;
}

.m-progess-item .dot-line {
    margin-right: 11px;
    position: absolute;
    bottom: 11px;
    right: 50%;
    height: 1px;
    width: 145px;
    background: #EAEBEC;
}

.m-progess-active .dot-line {
    background: #DDA960;
}

.container {
    margin: 0 auto;
    width: 960px;
}
.m-box-l {
    margin-left: -100%;
    float: left;
    width: 540px;
}

.m-box-r {
    width: 100%;
    float: left;
}

.m-box-l .main {
    float: right;
    margin-right: 132px;
}

.m-swiper {
    position: relative;
    height: 270px;
    width: 416px;
}

.m-box-l .swiper-container {
    height: 100%;
    padding-bottom: 30px;
    width: 100%;
}

.m-box-l .swiper-container .swiper-slide img { width: 100% }

.m-box-l .m-swiper .swiper-button-prev {
    height: 24px;
    width: 14px;
    left: -40px;
    background-size: 14px auto;
}
.m-box-l .m-swiper .swiper-button-next {
    height: 24px;
    width: 14px;
    right: -35px;
    background-size: 14px auto;
}

.swiper-pagination-bullet {
    margin: 0 10px !important;
    height: 4px;
    width: 18px;
    border-radius: 3px
}

.swiper-pagination-bullet-active {
    background: #DDA960
}

.m-gallery {
    margin: 46px 0 40px;
    width: 416px;
    overflow: hidden;
}
.m-gallery-inner {
    padding-left: 8px;
    width: 426px;
}

.m-gallery-item {
    float: left;
    margin-right: 20px;
    height: 75px;
    width: 120px;
    opacity: 0.6;
    -webkit-transition: all ease .2s;
    transition: all ease .2s;
}
.m-gallery-item-active {
    opacity: 1
}
.m-gallery-item img {
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.show-pic-loading { position: relative }
.show-pic-loading .pic-loading { display: block }

.pic-loading {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
    z-index: 1000;
}

.m-interaction {
    margin-left: 540px;
}
.m-interaction-title {
    margin: 4px 0 20px;
    font-size: 20px;
    font-weight: bold;
    color: #000;
}
.m-step-5 .m-interaction-title { margin-bottom: 20px }
.m-interaction-content {
    width: 440px;
}

.m-btns { 
    overflow: hidden 
}

.m-btn {
    float: left;
    margin: 0 20px 20px 0;
    height: 58px;
    width: 198px;
    border: 1px solid #aaa;
    border-radius: 2px;
    color: #aaa;
    cursor: pointer;
    font-size: 20px;
    line-height: 58px;
    text-align: center;
}
.m-btn:hover,
.m-btn-active {
    border-color: #DDA960;
    color: #DDA960;
}
.m-btn-active {
    background: url(../images/btn-active.png) no-repeat bottom right;
    background-size: 20px auto; 
}
.zs-tips {
    margin-top: -10px;
    margin-bottom: 86px;
    font-size: 16px;
    color: #000;
}

.m-step-btn {
    float: right;
    margin: 0 0 100px 20px;
    height: 58px;
    width: 198px;
    border: 1px solid #aaa;
    border-radius: 4px;
    color: #aaa;
    cursor: pointer;
    font-size: 20px;
    line-height: 58px;
    text-align: center;
}
.m-box-r .m-step-btns { margin-top: 56px }
.m-box-r .m-step-btn { margin: 0 20px 30px 0 }

.m-step-3 .m-step-btns .m-step-btn { margin-top: -100px }

.m-constellation { margin: 20px 0 -36px 0 }
.mc-btn {
    position: relative;
    float: left;
    margin: 0 19px 20px 0;
    height: 58px;
    width: 125px;
    border: 1px solid #aaa;
    border-radius: 2px;
    color: #aaa;
    cursor: pointer;
    font-size: 20px;
    line-height: 58px;
    text-align: center;
}
.mc-btn-by {
    background: url(../images/by.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-by:hover,
.mc-btn-by.m-btn-active { background-image: url(../images/by-active.png)  }
.mc-btn-jn {
    background: url(../images/jn.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-jn:hover,
.mc-btn-jn.m-btn-active { background-image: url(../images/jn-active.png)  }
.mc-btn-sz {
    background: url(../images/sz.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-sz:hover,
.mc-btn-sz.m-btn-active { background-image: url(../images/sz-active.png)  }
.mc-btn-jx {
    background: url(../images/jx.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-jx:hover,
.mc-btn-jx.m-btn-active { background-image: url(../images/jx-active.png)  }
.mc-btn-shizi {
    background: url(../images/shizi.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-shizi:hover,
.mc-btn-shizi.m-btn-active { background-image: url(../images/shizi-active.png)  }
.mc-btn-cn {
    background: url(../images/cn.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-cn:hover,
.mc-btn-cn.m-btn-active { background-image: url(../images/cn-active.png)  }
.mc-btn-tc {
    background: url(../images/tc.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-tc:hover,
.mc-btn-tc.m-btn-active { background-image: url(../images/tc-active.png)  }
.mc-btn-tx {
    background: url(../images/tx.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-tx:hover,
.mc-btn-tx.m-btn-active { background-image: url(../images/tx-active.png)  }
.mc-btn-ss {
    background: url(../images/ss.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-ss:hover,
.mc-btn-ss.m-btn-active { background-image: url(../images/ss-active.png)  }
.mc-btn-mj {
    background: url(../images/mj.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-mj:hover,
.mc-btn-mj.m-btn-active { background-image: url(../images/mj-active.png)  }
.mc-btn-sp {
    background: url(../images/sp.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-sp:hover,
.mc-btn-sp.m-btn-active { background-image: url(../images/sp-active.png)  }
.mc-btn-sy {
    background: url(../images/sy.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-sy:hover,
.mc-btn-sy.m-btn-active { background-image: url(../images/sy-active.png)  }


.mc-btn-mouse {
    background: url(../images/mouse.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-mouse:hover,
.mc-btn-mouse.m-btn-active { background-image: url(../images/mouse-active.png)  }


.mc-btn-cattle {
    background: url(../images/cattle.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-cattle:hover,
.mc-btn-cattle.m-btn-active { background-image: url(../images/cattle-active.png)  }

.mc-btn-tiger {
    background: url(../images/tiger.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-tiger:hover,
.mc-btn-tiger.m-btn-active { background-image: url(../images/tiger-active.png)  }


.mc-btn-rabbit {
    background: url(../images/rabbit.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-rabbit:hover,
.mc-btn-rabbit.m-btn-active { background-image: url(../images/rabbit-active.png)  }

.mc-btn-dragon {
    background: url(../images/dragon.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-dragon:hover,
.mc-btn-dragon.m-btn-active { background-image: url(../images/dragon-active.png)  }

.mc-btn-snake {
    background: url(../images/snake.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-snake:hover,
.mc-btn-snake.m-btn-active { background-image: url(../images/snake-active.png)  }


.mc-btn-horse {
    background: url(../images/horse.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-horse:hover,
.mc-btn-horse.m-btn-active { background-image: url(../images/horse-active.png)  }

.mc-btn-sheep {
    background: url(../images/sheep.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-sheep:hover,
.mc-btn-sheep.m-btn-active { background-image: url(../images/sheep-active.png)  }

.mc-btn-monkey {
    background: url(../images/monkey.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-monkey:hover,
.mc-btn-monkey.m-btn-active { background-image: url(../images/monkey-active.png)  }


.mc-btn-rooster {
    background: url(../images/rooster.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-rooster:hover,
.mc-btn-rooster.m-btn-active { background-image: url(../images/rooster-active.png)  }

.mc-btn-dog {
    background: url(../images/dog.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-dog:hover,
.mc-btn-dog.m-btn-active { background-image: url(../images/dog-active.png)  }


.mc-btn-pig {
    background: url(../images/pig.png) no-repeat bottom right;
    background-size: 36px auto;
}
.mc-btn-pig:hover,
.mc-btn-pig.m-btn-active { background-image: url(../images/pig-active.png)  }


.mc-btn:hover,
.mc-btn.m-btn-active {
    border-color: #DDA960;
    color: #DDA960;
}
.mc-btn.m-btn-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 20px;
    width: 20px;
    background: url(../images/btn-active.png) no-repeat;
    background-size: 20px auto;
}

.m-btn-next {
    background: #000;
    border-color: #000;
    color: #fff;
}
.m-btn-next:hover { color: #DDA960 }

.m-number {
    padding: 50px 0;
    border-top: 1px solid #ddd;
}
.m-number-title,
.m-number-switch {
    font-size: 20px;
}
.m-number-title {
    float: left;
}
.m-number-switch {
    float: right;
    color: #DDA960;
    cursor: pointer;
}
.m-number-list { 
    margin-top: 10px;
    width: 980px;
}
.m-number-item {
    position: relative;
    float: left;
    margin: 30px 20px 0 0;
    height: 58px;
    width: 174px;
    border: 1px solid #aaa;
    border-radius: 2px;
    color: #aaa;
    cursor: pointer;
    font-size: 16px;
    line-height: 58px;
    text-align: center;
}
.m-number-item:hover,
.m-number-item.active {
    border-color: #DDA960;
    color: #DDA960;
}
.m-number-item.active {
    background: url(../images/btn-active.png) no-repeat bottom right;
    background-size: 20px auto; 
}

.m-search {
    position: relative;
    margin-right: 20px;
    height: 58px;
    padding-right: 59px;
    border: 1px solid #aaa;
}

.m-search input {
    display: block;
    width: 100%;
    border: 0;
    height: 100%;
    font-size: 20px;
    text-indent: 1em;
}

.icon-search {
    position: absolute;
    right: -1px;
    top: -1px;
    height:60px;
    width: 60px;
    background: #DDA960 url(../images/icon-search.png) no-repeat center center;
    background-size: 50% auto;
    cursor: pointer;
}

.card-box {
    width: 416px;
}

.card-box img { 
    margin-bottom: 15px;
    width: 100%; 
}
.self-tips {
    color: #000;
    font-size: 14px;
    line-height: 30px
}

/* step 3 */
.is-make-tips {
    color: #000;
    font-size: 14px;
    line-height: 30px
}
.m-make {
    border-top: 1px solid #ddd;
}
.m-input {
    position: relative;
    float: left;
    margin: 0 20px 30px 0;
    height: 58px;
    width: 198px;
    border: 1px solid #aaa;
    border-radius: 2px;
}
.m-input input {
    display: block;
    height: 100%;
    width: 100%;
    border: none;
    font-size: 20px;
    text-indent: 1em;
}
.m-input .placeholder {
    position: absolute;
    left: 0;
    top: 0;
    height: 48px;
    padding-top: 12px;
    width: 100%;
    color: #aaa;
    font-size: 16px;
    text-align: center;
}
.m-make-example {
    float: right;
    margin-right: 144px;
    width: 390px;
}
.m-make-example img {
    margin-bottom: 20px;
    width: 100%;
}
.m-make-example p {
    color: #000;
    font-size: 18px;
    text-align: center;
}
.form-input {
    position: relative;
    height: 60px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 2px;
}
.form-input input {
    display: block;
    height: 100%;
    width: 100%;
    border: none;
    outline: 0;
    font-size: 16px;
    text-indent: 12px;
    opacity: 0;
}
.form-group-make .form-input input { opacity: 1 }
.m-input-focus, .form-input-focus { border-color: #DDA960 }
.form-input .label {
    position: absolute;
    top: 20px;
    left: 6px;
    height: 20px;
    padding: 0 6px;
    background: transparent;
    color: #b2b2b2;
    font-size: 16px;
    -webkit-transition: all linear .2s;
    -moz-transition: all linear .2s;
    transition: all linear .2s;
}
.form-input-active input {
    opacity: 1;
    -webkit-transition: opacity linear .2s .2s;
    -moz-transition: opacity linear .2s .2s;
    transition: opacity linear .2s .2s;
}
.form-input-active .label { 
    color: #b2b2b2;
    top: -10px;
    font-size: 14px;
    background: #fff;
}
.form-input-focus .label {
    color: #DDA960;
}
.form-input-active .label,
.form-input-active .icon-clear {
    display: block;
}
.m-input .error-tips,
.select-group .error-tips,
.form-input .error-tips {
    display: none;
    position: absolute;
    left: 8px;
    top: -18px;
    padding: 4px;
    background: #F43D3D;
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    -webkit-animation: slideUp .3s ease;
    -moz-animation: slideUp .3s ease;
    animation: slideUp .3s ease;
}
.m-input .error-tips::after,
.select-group .error-tips::after,
.form-input .error-tips::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 22px;
    height: 0;
    border-style: solid;
    border-width: 5px;
    border-color: #F43D3D transparent transparent transparent;
}
.m-input-error, .form-input-error, .select-group-error { border-color: #F43D3D }
.m-input-error .error-tips,
.form-input-error .error-tips,
.select-group-error .error-tips { display: block }
.form-input .icon-clear {
    display: none;
    position: absolute;
    top: 21px;
    right: 40px;
    height: 18px;
    width: 18px;
    background: url(../images/icon-clear.png) no-repeat;
    background-size: 100% auto;
    cursor: pointer;
}
@-webkit-keyframes slideDown {
    from {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes slideUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes slideUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}


.select-group { 
    position: relative;
    margin-bottom: 20px;
    width: 440px 
}

.select-group select {
    float: left;
    height: 60px;
    margin-right: 20px;
    width: 126px;
    border-color: #ccc;
    font-size: 16px;
}

.m-step-4 .m-interaction { margin-bottom: -40px }


.m-step-5-wrapper { background: #F9FAFB }
.m-info-wrapper {
    margin-bottom: 20px
}
.info { 
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.6
}
.info-content {
    float: left;
    width: 100%;
    color: #000;
}
.info-content div { 
    padding-left: 100px;
}
.info-label {
    float: left;
    margin-left: -100%;
    color: #777;
}
.m-btns-pay .m-btn {
    width: 124px;
}

.m-btns-pay .m-btn img {
    width: 100%;
}

.safe-tips {
    padding-left: 27px;
    line-height: 27px;
    background: url(../images/icon-dun.png) no-repeat left top;
    background-size: auto 27px;
    color: #777;
    font-size: 14px;
}

.m-step-5 .m-step-btns {
    padding: 30px 0 50px
}
.m-step-5 .m-step-btn {
    margin-bottom: 0
}

/* single page */
.l800 { 
    margin: 0 auto;
    width: 800px;
}
.l688 {
    margin: 0 auto;
    width: 688px;
}
.l920 {
    margin:0 auto;
    width: 920px;
}
.s-gallery {
    height: 400px;
    background: url(../images/bg-map.png) no-repeat center top;
}
.box-single .swiper-container {
    padding: 125px 0 55px;
}
.box-single .swiper-slide {
    -webkit-transition: 300ms;
    -ms-transition: 300ms;
    transition: 300ms;
}
.box-single .swiper-slide-active {
    -webkit-transform: scale(1.28);
    -ms-transform: scale(1.28);
    transform: scale(1.28);
    z-index: 100
}
.box-single .swiper-slide img {
    width: 100%;
}
.s-main {
    padding: 20px 0 80px;
}
.s-step { position: relative } 
.s-step-title {
    margin-bottom: 16px;
    padding: 13px 0;
    color: #000;
    font-size: 16px;
    font-weight: bold;
}
.s-step-init .s-step-title {
    margin-bottom: 0;
    color: #777;
    border-bottom: 1px solid #ddd;
}

.s-step-init  .s-step-body { display: none }
.s-box-edit,
.s-box-complete {
    -webkit-transition: opacity 120ms linear;
    -moz-transition: opacity 120ms linear;
    transition: opacity 120ms linear;
}
.s-box-edit { display: block }
.s-box-complete { display: none }
.s-step-switching .s-box-edit,
.s-step-complete  .s-box-edit { display: none }
.s-step-switching .s-box-complete,
.s-step-complete  .s-box-complete { display: block }
.s-step-switching .s-box-complete { opacity: 0 }
.s-card-box {
    width: 704px;
}
.s-step .m-btn {
    margin-bottom: 15px;
    margin-right: 16px;
    height: 46px;
    width: 158px;
    line-height: 46px;
    font-size: 16px;
}
.s-box-complete {
    position: relative;
    margin-bottom: 20px;
    padding: 0 24px 32px;
    border-bottom: 1px solid #ddd;
}
.s-btn-edit {
    display: none;
    position: absolute;
    top: 13px;
    right: 0;
    height: 30px;
    width: 78px;
    border-radius: 3px;
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
}
.s-step-complete .s-btn-edit { display: block }
.m-complete-card,
.m-complete-info { float: left }
.m-complete-card {
    height: 60px;
    width: 96px;
    margin-right: 30px;
}
.m-complete-card img { width:100% }
.s-btn-next {
    margin: 36px auto 20px;
    height: 48px;
    width: 160px;
    background: #000;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    line-height: 48px;
    text-align: center;
}
.s-btn-next:hover { color: #DDA960 }
.m-card-btns { margin-bottom: 20px }
.s-step .zs-tips { 
    margin-top: 0;
    margin-bottom: 40px 
}
.s-step .m-interaction-title { 
    font-size: 16px;
    margin-bottom: 32px;
}
.s-step .mc-btn {
    height: 46px;
    width: 158px;
    margin: 0 16px 24px 0;
    font-size: 16px;
    line-height: 46px;
}
.s-step .m-constellation {
    margin-bottom: -30px;
}
.s-step .m-search {
    margin-right: 0;
    height: 46px;
    padding-right: 48px;
}
.s-step .m-search input { font-size: 16px }
.s-step .icon-search {
    height: 48px;
    width: 48px;
}
.pd24 { padding: 0 24px }
.form-group .form-input {
    float: left;
    margin-right: 16px;
}
.form-group > :last-child {
    margin-right: 0;
}
.form-group .form-input {
    width: 310px;
}
.s-step .form-input { 
    height: 46px;
    margin-bottom: 32px;
}
.s-step .form-input .icon-clear { 
    height: 14px;
    width: 14px;
    top: 17px;
}
.s-step .form-input .label {
    top: 16px; 
    font-size: 14px 
}
.s-step .form-input-active .label {
    top: -7px;
    font-size: 12px 
}
.s-step  .form-input input {
    font-size: 14px
}
.s-step .info .info-label { color: #000 }
.s-step .info { font-size: 14px }
.s-step .m-number-title, 
.s-step .m-number-switch {
    font-size: 14px
}
.s-step .m-number-list { width: 656px }
.s-step .m-number-item {
    margin:24px 16px 0 0;
    height: 46px;
    width: 146px;
    line-height: 46px;
    font-size: 12px;
}
.s-address-form .select-group {
    padding: 8px 16px;
    border: 1px solid #ccc;
    width: 608px;
}
.s-address-form select {
    height: 32px;
    width: 100px;
    font-size: 14px;
}
.s-step .m-number {
    margin-top: 32px;
    border-top: 0;
    padding: 0;
}
.s-step-name .form-input {
    margin-top: 15px;
    margin-bottom: 0;
}
.s-step-pay .m-btns-pay .m-btn {
    width: 200px;
}
.s-step-pay .m-btns-pay .m-btn-last { margin-right: 0 }
.s-step-pay .m-btns-pay .m-btn img {
    height:100%;
    width: auto;
}
.m-bar-wrapper {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    height: 32px;
    padding: 16px 0;
    background: #fff;
    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.10);
    z-index: 3
}
.show-header .m-bar-wrapper { top: 64px }
.m-bar-wrapper-fixed {
    position: fixed;
    top: 0;
    -webkit-animation: slideDown .3s ease;
    -moz-animation: slideDown .3s ease;
    animation: slideDown .3s ease;
}
.m-bar-box {
    height: 32px;
    padding: 0 50px;
    border-right: 1px solid #dbdbdb;
}
.m-bar-title { border-right: 1px solid #dbdbdb }
.m-bar-box .fs14 { margin-bottom: 4px }
.m-bar-title,
.m-bar-footer {
    line-height: 32px;
}
.m-bar-footer { margin-right: 10px }
.m-confirm {
    padding-top: 48px;
    background: #f9fafb url(../images/bg-map.png) no-repeat center top;
}
.m-confirm-card {
    margin-right: 40px;
    height: 200px;
    width: 316px;
}
.m-confirm-card img { 
    width:100%; 
}
.m-confirm .info { 
    margin-bottom: 15px;
    font-size: 14px;
}
.box-single .m-step-btn {
    margin-top: 48px;
    margin-left: 0;
    margin-right: 20px;
    height: 46px;
    width: 158px;
    font-size: 20px;
    line-height: 46px;
}
.box-single .m-step-btns {
    margin-left: 50%
}
.card { position: relative; }
.card-number {
    position: absolute;
    left: 68px;
    top: 134px;
}
.card-name {
    position: absolute;
    left: 45px;
    top: 215px;
    color: #ab9063;
    font-size: 16px;
}
.card-name-xz { 
    left: 30px;
    color: #e0d2d2 
}
.card-name-sx { 
    left: 30px;
    color: #d0a889;
    text-shadow: 1px 1px 1px #333;
}
.card-number-left,
.card-number-right { float: left }
.card-number-left { margin-right: 136px }
.number {
    display: block;
    float: left;
    margin-right: 2px;
    height: 24px;
    width: 15px;
}
.number-0 {
    background: url(../images/0@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-1 {
    background: url(../images/1@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-2 {
    background: url(../images/2@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-3 {
    background: url(../images/3@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-4 {
    background: url(../images/4@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-5 {
    background: url(../images/5@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-6 {
    background: url(../images/6@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-7 {
    background: url(../images/7@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-8 {
    background: url(../images/8@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-9 {
    background: url(../images/9@3x.png) no-repeat top left;
    background-size: 100% auto;
}

.number-0-xz {
    background: url(../images/0@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-1-xz {
    background: url(../images/1@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-2-xz {
    background: url(../images/2@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-3-xz {
    background: url(../images/3@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-4-xz {
    background: url(../images/4@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-5-xz {
    background: url(../images/5@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-6-xz {
    background: url(../images/6@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-7-xz {
    background: url(../images/7@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-8-xz {
    background: url(../images/8@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.number-9-xz {
    background: url(../images/9@3x.png) no-repeat top left;
    background-size: 100% auto;
}
.box-single .number {
    height: 18px;
    width: 12px;
} 
.box-single .card-number { 
    left: 48px;
    top: 100px; 
}
.box-single .card-name {
    left: 35px;
    top: 160px;
    font-size: 14px;
}
.box-single .card-number-left { margin-right: 100px }
